<template>
    <div class="custom-select" ref="selectRef">
        <div class="select-trigger" :class="{ 'is-placeholder': !selectedLabel }" @click="toggleDropdown">
            <el-icon v-if="selectedOption && selectedOption.icon" class="option-icon" size="18">
                <component :is="selectedOption.icon" />
            </el-icon>
            {{ t(`${selectedLabel}`) || placeholder }}
            <el-icon class="select-arrow" :class="{ 'is-open': isOpen }">
                <CaretBottom />
            </el-icon>
        </div>
        <div v-show="isOpen" class="select-dropdown">
            <div v-for="option in options" :key="option.value" class="select-option" :class="{ 'is-disabled': option.disabled, 'is-selected': option.value === modelValue }" @click.stop="selectOption(option)">
                <el-icon v-if="option.icon" class="option-icon" size="18">
                    <component :is="option.icon" />
                </el-icon>
                {{ t(`${option.label}`) }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: 'Please select'
    }
})

const emit = defineEmits(['update:modelValue'])

const isOpen = ref(false)
const selectRef = ref(null)
const internalValue = ref(props.modelValue)

const selectedOption = computed(() => props.options.find(option => option.value === internalValue.value))

const selectedLabel = computed(() => (selectedOption.value ? selectedOption.value.label : ''))

const toggleDropdown = () => {
    isOpen.value = !isOpen.value
}

const closeDropdown = event => {
    if (selectRef.value && !selectRef.value.contains(event.target)) {
        isOpen.value = false
    }
}

const selectOption = option => {
    if (!option.disabled) {
        internalValue.value = option.value
        emit('update:modelValue', option.value)
        isOpen.value = false
    }
}

watch(
    () => props.modelValue,
    newValue => {
        internalValue.value = newValue
    }
)

onMounted(() => {
    document.addEventListener('click', closeDropdown)
})

onUnmounted(() => {
    document.removeEventListener('click', closeDropdown)
})
</script>

<style lang="scss" scoped>
.custom-select {
    position: relative;
    width: 222px;
    height: 46px;
    background: var(--background-dropdown);
    border-radius: 10px;
    font-family: Arial, sans-serif;
    z-index: 1000;
}

.select-trigger {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    height: 46px;
    border-radius: 4px;
    background: var(--background-dropdown);
    cursor: pointer;
    border-radius: 18px;
    user-select: none;
    box-sizing: border-box;
    font-size: 18px;
}

.select-trigger.is-placeholder {
    color: #909399;
}

.select-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.select-arrow.is-open {
    transform: rotate(180deg);
}

.select-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    padding: 10px 6px;
    overflow-y: auto;
    background: var(--background-dropdown);
    border-radius: 18px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
    box-sizing: border-box;
}

.select-option {
    display: flex;
    align-items: center;
    line-height: 46px;
    height: 46px;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 18px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
    color: #b8c0c9;
    box-sizing: border-box;

    &:last-child {
        border-bottom: none;
    }
}

.select-option:hover {
    color: var(--fprimary);
    background-color: var(--background-dropdown-hover);
}

.select-option.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.select-option.is-selected {
    color: var(--fprimary);
    font-weight: bold;
}

.option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
</style>
